import React, { useState, useEffect, useLayoutEffect } from 'react'
import PubSub from 'pubsub-js'
import '@arco-design/web-react/dist/css/arco.css'
import FeedList from './FeedList'
import { useSelector } from 'react-redux'
import { getFeedListApi } from '../../api/chat'
import WsMessageType from '../../utils/Common'

// 左边消息列表
const Feed = () => {
  const [feedList, setFeedList] = useState([])
  const userStore = useSelector((state) => state.user)
  const { id } = userStore.info

  useEffect(() => {
    const getFeedList = async () => {
      let result = await getFeedListApi({ userId: id })
      return result?.data || []
    }

    const fetchData = async () => {
      const result = await getFeedList()
      setFeedList(result)
    }
    fetchData()
    // 订阅接收消息
    var token = PubSub.subscribe(WsMessageType.receiveMessage, (message, data) => {
      fetchData()
    })

    return () => PubSub.unsubscribe(token)
  }, [id])

  return (
    <>
      {feedList.map((item) => (
        <FeedList key={item.period} feedList={item} />
      ))}
    </>
  )
}

export default Feed
